<!--  -->
<template>
<div class='liveBox'>
    <div class="header">
        <div class="liveStatus">
            直播状态
                 <el-select v-model="value" @change='changeStates' placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
        </div>
        <div class="liveSearch">
            <div class="liveFont">主播搜索</div>
            <el-input v-model="searchInp" @change='changeValue' placeholder="姓名，ID"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchClick"></el-button>
        </div>
    </div>
    <div class="main">
        <div class="allLive">全部直播</div>
        <div class="liveList">
            <div class="liveItem" v-for="item in tabList" :key="item.id">
                <div class="imgs">
                    <img src="../../../../assets/img/wyb.jpeg" alt="">
                     <span :class="item.status===0?'over':'living'">{{item.status===0?'已结束':'直播中'}}</span>
                </div>
                <div>{{item.title}}</div>
                <div class="liveTime">{{item.name}}&nbsp;&nbsp;{{item.timer}}</div>
                 <div class="fontDetail" v-if="item.status===0">
                        <span @click="toLiveDetail(item)">数据详情</span>
                        <span @click="delLive(item.id)">删除</span>
                </div>
                <div class="zhibo" v-else>
                    <span :style="{color:'blue'}" @click="$router.push('/toLive')">进入直播</span>
                    <el-switch
                        v-model="item.flag"
                        active-color="blue"
                        inactive-color="#ccc">
                    </el-switch>  
                </div>
               
            </div>
        </div>

    </div>
    <div class="footer">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[12, 15, 18, 24]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
    </div>
</div>
</template>

<script>
import {apiLiveList} from "../../../../api/liveList"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    options: [{
          value: '',
          label: '已选择'
        },{
          value: '1',
          label: '直播中'
        }, {
          value: '0',
          label: '已结束'
        }],
        value: '',
        searchInp:'',//搜索值
        liveList:[],
        tabList:[],
        pageSize:12,
        pageIndex:1,
        total:0,//总数
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   async getLiveList(){//直播列表
        const res=await apiLiveList({
            pageSize:this.pageSize,
            pageIndex:this.pageIndex
        })
        //console.log(res,'直播')
        this.liveList=res.data
        this.tabList=res.data
        this.total=res.total
    },
    searchClick(){//模糊搜索
        let index=this.tabList.filter(item=>{
            return item.name.includes(this.searchInp)||item.id.includes(this.searchInp)
        })
        this.tabList=index
    },
    changeValue(value){//监听搜索input事件
    if(value===""){
        this.getLiveList()
    }
    },
    changeStates(value){//选择直播状态
        //console.log(value,'value值')
        if(value==='1'){
            this.tabList=this.liveList.filter((item)=>{
               return item.status===1
            })
        }else if(value==='0'){
            this.tabList=this.liveList.filter((item)=>{
               return item.status===0
            })
        }else{
            this.tabList=this.liveList
        }
    },
     handleSizeChange(val) {//监听每页显示条数
         this.pageSize=val
         this.getLiveList()
      },
      handleCurrentChange(val) {//显示第几页
        this.pageIndex=val
        this.getLiveList()
      },
      //删除
      delLive(id){
          this.tabList=this.tabList.filter(item=>{
              return item.id!==id
          })
      },
      //跳数据详情
      toLiveDetail(item){
          this.$router.push({
              name:"liveDetailIndex",
              params:item
          })
      }
},
//生命周期 - 创建完成（可以访问当前this实例）
 created() {
     this.getLiveList()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
.liveBox{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 15px;
    .header{
        height: 80px;
        display: flex;
        align-items: center;
        .liveSearch{
            display: flex;
            align-items: center;
            .liveFont{
                padding-left: 10px;
                width: 120px;
            }
            button{
                background: rgb(118, 118, 224);
                color:#fff;
                outline: 0;
                border: 0;
            }
        }
    }
    .main{
        flex:1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .allLive{
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 24px;
        }
        .liveList{
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            align-items: center;
            .liveItem{
                width: 15%;
                padding:10px 1%;
                height: 330px;
                position: relative;
                .imgs{
                    width: 240px;
                    height: 230px;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .over{
                        height: 30px;
                        width: 70px;
                        background: #999;
                        position: absolute;
                        bottom:10px;
                        left:12px;
                        color: #fff;
                        border-radius: 10px;
                       line-height: 30px;
                       text-align:center;
                    }
                    .living{
                       height: 30px;
                        width: 70px;
                        background: rgb(77, 165, 77);
                        position: absolute;
                        bottom:10px;
                        left:12px;
                        color: #fff;
                        border-radius: 10px;
                       line-height: 30px;
                       text-align:center;
                    }
                }
                div{
                    display: flex;
                    padding-top: 6px;
                    height: 24px;
                    line-height: 24px;
                    
                }
                .zhibo{
                        display: flex;
                        justify-content: space-between;
                    }
                .fontDetail{
                    display: flex;
                    justify-content: space-between;
                    span{
                        color: blue;
                    }
                }
            }
        }
    }
    .footer{
        height: 60px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>